<template>
	<view class="tabbar">
		<view class="tab" v-for="(item,index) in tabbarList" :key="index" @click="navigatorTo(item.url)">
			<!-- 判断是否有点击，如果没有就不是激活样式，点击就是激活的样式 -->
			<image class="imgsize" v-if="item.type == 0" :src="current == index ? item.selectIcon : item.icon"
				mode="widthFix"></image>
			<view :class="current == index ?'active':'text'">{{item.name}}</view>
		</view>

	</view>
</template>

<script>
	export default {
		name: "usertabbar",
		props: {
			current: {
				type: Number,
				default: 0, //默认第一个页面tabbar激活
			},
		},
		setup(props) {
			// setup() 接收 props 作为第一个参数
			console.log(props.current)
		},


		data() {
			return {
				tabbarList: [{
					type: 0,
					icon: '/static/home.png',
					selectIcon: '/static/home-done.png',
					name: '首页',
					url: '/pages/tabBar/index/index',
				},{
					type: 0,
					icon: '/static/atd.png',
					selectIcon: '/static/atd-done.png',
					name: '考勤',
					url: '/pages/tabBar/attendance/attendance',
				}, {
					type: 0,
					icon: '/static/set.png',
					selectIcon: '/static/set-done.png',
					name: '我的',
					url: '/pages/tabBar/settings/settings',
				}]
			};
		},
		methods: {
			navigatorTo(e) {
				uni.switchTab({
					url: e,
				})
			},
		},
	}
</script>

<style scoped lang="scss">
	.tabbar {
		position: fixed;
		bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		/* 兼容 iOS<11.2 */
		padding-bottom: env(safe-area-inset-bottom);
		/* 兼容iOS>= 11.2 */
		background-color: #FFFFFF;
		width: 100%;
		z-index: 1;
		box-sizing: border-box;
		box-shadow: 0rpx 0rpx 12rpx 2rpx rgba(0, 0, 0, 0.1);
		border-radius: 30rpx 30rpx 0rpx 0rpx;
		padding-top: 12rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;

		.tab {
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.imgsize {
			width: 56rpx;
			height: 56rpx;
		}

		.text {
			margin-top: 4rpx;
			padding-bottom: 12rpx;
			font-size: 20rpx;
			color: #333333;
			line-height: 20rpx;
		}

		.active {
			margin-top: 4rpx;
			padding-bottom: 12rpx;
			font-size: 20rpx;
			color: #2196F3;
			line-height: 20rpx;
		}
	}
</style>